<template>
  <a-modal
    :title="title"
    :visible="isShow"
    @ok="handleSubmit"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    @cancel="handleCancel"
    width="40%"
    :destroyOnClose="true"
  >
    <a-form :form="form">
      <a-form-item
        label="用户名："
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-input
          v-decorator="[
            'nickName',
            { rules: [{ required: true, message: '请输入用户名' }] }
          ]"
          placeholder="请输入用户名"
          :disabled="isEdit"
        />
      </a-form-item>
      <a-form-item
        label="账号："
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-input
          v-decorator="[
            'username',
            { rules: [{ required: true, message: '请输入账号' }] }
          ]"
          placeholder="请输入账号"
          :disabled="isEdit"
        />
      </a-form-item>
      <a-form-item
        v-if="!isEdit"
        label="密码："
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-input
          v-decorator="[
            'password',
            { rules: [{ required: true, message: '请输入密码' }] }
          ]"
          placeholder="请输入密码"
          :disabled="isEdit"
        />
      </a-form-item>
      <a-form-item
        label="状态："
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-radio-group
          name="radioGroup"
          v-decorator="[
            'status',
            { rules: [{ required: true, message: '请选择状态' }] }
          ]"
        >
          <a-radio :value="1">启用</a-radio>
          <a-radio :value="2">禁用</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        label="角色："
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-select
          placeholder="请选择"
          v-decorator="[
            'roles',
            { rules: [{ required: true, message: '请选择角色' }] }
          ]"
        >
          <a-select-option
            v-for="item in roleList"
            :key="item.name"
            :value="item.id"
            >{{ item.name }}</a-select-option
          >
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import { page } from "@/api";
export default {
  // props: ['show', 'disposeIds'],
  data() {
    return {
      form: this.$form.createForm(this),
      confirmLoading: false,
      isShow: false,
      addTime: "",
      personId: "",
      getPars: {
        currentPage: 1,
        pageSize: 10,
        name: ""
      },
      roleList: [],
      isEdit: false,
      title: ""
    };
  },
  mounted() {},
  methods: {
    show(record) {
      confirmLoading: false;
      this.isShow = true;
      this.getRole();

      if (record === undefined) {
        // 新增用户
        this.isEdit = false;
        this.personId = "";
        this.title = "新增用户";
      } else {
        // 编辑用户
        this.isEdit = true;
        this.title = "编辑用户";
        this.personId = record.id;
        setTimeout(() => {
          // debugger
          this.form.setFieldsValue({
            username: record.username,
            nickName: record.nickName,
            password: record.password,
            status: record.status,
            roles: Number(record.roleId)
          });
        });
      }
    },

    getRole() {
      page.getRoleList(this.getPars).then(res => {
        if (res.data.data !== null) {
          this.roleList = res.data.data.records;
        }
      });
    },
    handleCancel() {
      this.isShow = false;
      // this.$emit('disposeFormClose')
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true;
          // debugger;
          if (!this.isEdit) {
            //添加
            let params = Object.assign(values);
            page
              .addUser(params)
              .then(res => {
                if (res.data.code === -1) {
                  this.$message.warning(res.data.message);
                } else {
                  this.isShow = false;
                  this.$emit("addSuccess");
                  this.$message.success("添加用户成功");
                }
                this.confirmLoading = false;
              })
              .catch(() => {
                this.isShow = false;
                this.confirmLoading = false;
                this.$message.warning("添加用户失败");
              });
          } else {
            //更新
            let params = Object.assign(values, { id: this.personId });
            page
              .updateUser(params)
              .then(res => {
                if (res.data.code === -1) {
                  this.$message.warning(res.data.message);
                } else {
                  this.isShow = false;
                  this.$emit("updateSuccess");
                  this.$message.success("更新成功");
                }
                this.confirmLoading = false;
              })
              .catch(() => {
                this.isShow = false;
                this.confirmLoading = false;
                this.$message.warning("更新失败");
              });
          }
        }
      });
    }
  }
};
</script>
